<template>
    <div class="login">
        <div class="login-layer">
            <div class="img"></div>

            <form class="layui-form" lay-filter="form" :form="form">
                <div class="layui-form-item">
                    <input
                            class="layui-input"
                            lay-verify="phone"
                            required
                            name="telephone"
                            type="tel"
                            maxlength="11"
                            @input="handleInput"
                            autocomplete="off"
                            placeholder="请输入手机号">
                    <span @click="getCode">{{codeText}}</span>
                </div>
                <div class="layui-form-item">
                    <input
                            class="layui-input"
                            lay-verify="code"
                            required
                            name="code"
                            type="tel"
                            maxlength="6"
                            autocomplete="off"
                            placeholder="请输入验证码">
                </div>
                <div class="layui-form-item">
                        <input
                                type="checkbox"
                                lay-verify="clause"
                                required
                                lay-skin="primary"
                                value="1"
                                lay-filter="check"
                                name="clause">
                        <em @click="clauseDetail">我已阅读并同意《回车房产云用户服务条款》</em>
                </div>
                <div class="layui-form-item">
                    <input type="button"
                            lay-submit
                            lay-filter="Submit"
                            class="layui-btn"
                           :class="{'layui-btn-disabled':!type}"
                           :disabled="!type"
                           value="立即登录" />
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: "login",
        props:['urls'],
        data(){
            return {
                type:false,
                codeText:'获取验证码',
                num:59,
                IntervalCode:false,//获取验证码倒计时不可点击
                tel:'',
            }
        },
        computed:{
            form(){
                var _this = this;
                layui.use('form',function(){
                    var form = layui.form;
                    form.on('submit',function(data){
                        var msg = data.field;
                         if(_this.type === true){
                            $.ajax({
                                type:"GET",
                                url:_this.urls.login.login,
                                data:msg,
                                success:function(res){
                                    if(res.code ==='1'){
                                         window.location.href = '/';
                                        _this.$emit('setCookie','token,'+res.token+',365');
                                    }else{
                                        layui.use('layer',function(){
                                            layer.msg(res.message, {icon: 5,anim: 6});
                                        })
                                    }
                             }
                            })
                         }
                    });
                    form.on('checkbox(check)', function(data){
                        _this.type = data.elem.checked;
                        // console.log(_this.type)
                    });
                    form.verify({
                        code:function(value,item){
                            if(value === ''){
                                return '验证码不能为空'
                            }
                        },
                        phone:function(value,item){
                            if(value === ''){
                                return '电话号码不能为空'
                            }else if(!(/^1[3|4|5|7|8|9][0-9]\d{4,8}$/.test(value))){
                                return '电话号码格式不正确'
                            }
                        }
                    });
                    form.render()
                })
            }
        },
        methods:{
            handleInput(e){
                // console.log(e.target.value)
                 this.tel=e.target.value.replace(/[^\d]/g,'');
            },
            getCode(e){
                var _this = this;
                if(this.tel === ''){
                    layui.use('layer',function(){
                        layer.msg('电话号码不能为空', {icon: 5,anim: 6});
                    })
                    // console.log('电话号码不能为空')
                }else if(!(/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(this.tel))){
                    // console.log(this.tel)
                    layui.use('layer',function(){
                    layer.msg('电话号码格式不正确', {icon: 5,anim: 6});
                    })
                }else{
                    if(!_this.IntervalCode){
                        $.get(_this.urls.login.send,{telephone:this.tel},function(res){
                            if(res.code === '1'){
                                layui.use('layer',function(){
                                    layer.msg(res.message, {icon: 1,anim: 0});
                                })
                            }

                            var time = setInterval(function(){
                                _this.IntervalCode = true;
                                if(_this.num === 0){
                                    clearInterval(time);
                                        _this.IntervalCode = false;
                                    _this.codeText = '获取验证码';
                                    _this.num = 59;
                                }else{
                                    _this.codeText = (_this.num--)+'s后重新获取';
                                }
                            },1000)
                        })

                    }
                }

            },
            clauseDetail(){
                layui.use('layer',function(){
                        layer.open({
                            type: 2,
                            area: ['580px', '450px'],
                            title:'回车房产云用户服务条款',
                            content: ['./static/layer.html'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        });
                })
            },
        }
    }
</script>

<style scoped lang="less">
@import "../../static/css/style.less";
.login{
    width: 100%;
    min-width: 1200px;
    height: 100%;
    display: inline-block;
    .pa;
    left: 0;
    top: 0;
    .bud('../../static/images/login_bg.png',center center,cover);
    .login-layer{
        width: 345px;
        height: 400px;
        background: @cf;
        .br(3px);
        .bs(0 0 10px 2px #ccc);
        .pa;
        top: 0;
        bottom: 0;
        margin:auto 0;
        right: 150px;
        padding:55px 42px;
        .img{
            width: 140px;
            height: 80px;
            .bud('../../static/images/login_logo.svg',center center,100% 100%);
            margin:0 auto 25px;

        }
        .layui-form{
            >div{
                .pr;
                span{
                    .pa;
                    right:15px;
                    top: 5px;
                    height: 25px;
                    line-height: 25px;
                    .br(25px);
                    padding:0 20px;
                    background: #eee;
                    color: @c3;
                    cursor: pointer;
                    font-size: 12px;
                }
                input{
                    border:none;
                    border-bottom: 1px solid #ccc;
                    margin-bottom: 15px;
                }
                em{
                    font-size: 12px;
                    cursor: pointer;
                }
                input[type='button']{
                    width: 100%;
                    .blg(to right,#cd1f5c,#e11e27);
                    color: @cf!important;
                    margin-top: 12px;
                }
                input[type='button']:disabled{
                    .blg(to right,#efefef,#efefef);
                    border:1px solid #ccc;
                }
            }
        }
    }
}
</style>